<template>
  <div id="nlChar"></div>
</template>

<script>
export default {
  props: {
    //选中编码数据
    charData: {
      type: Array,
      default: () => []
    },
    grid: {
      type: Object,
      default: () => {
        let data = {
          top: "20%",
          left: "10%",
          right: "3%",
          bottom: "26%"
        };
        return data;
      }
    }
  },
  data() {
    return {};
  },
  created() {
    setTimeout(() => {
      this.getChars();
    }, 200);
  },
  methods: {
    getChars() {
      let dataList = this.charData;
      var myChart = this.$echarts.init(document.getElementById("nlChar"));
      var option = {
        title: {
          text: "年龄分布",
          textStyle: {
            color: "#cbd7fa",
            fontSize: this.$fontSize(0.18) //字体大小
          }
        },
        // 加滚动条
        dataZoom: [
          {
            show: false,
            realtime: true,
            start: 0,
            end: 80
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 80
          }
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          },
          textStyle: {
            fontSize: this.$fontSize(0.18) //字体大小
          }
        },
        grid: {
          top: this.grid.top,
          left: this.grid.left,
          right: this.grid.right,
          bottom: this.grid.bottom,
          // show: true, // 显示边框
          borderColor: "#012f4a" // 边框颜色
        },
        xAxis: [
          {
            type: "category",
            data: [
              "0-10",
              "11-20",
              "21-30",
              "31-40",
              "41-50",
              "51-60",
              "61-70",
              "71-80",
              "81-90",
              "91-100"
            ],
            axisTick: {
              alignWithLabel: true,
              show: false
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#FFFFFF",
                fontSize: this.$fontSize(0.19) //字体大小
              },
              interval: 0 //代表显示所有x轴标签显示
              // rotate: 45 //代表逆时针旋转45度
            },
            axisLine: {
              lineStyle: {
                color: "#EEEBE9",
                show: false
              }
            },
            splitLine: {
              //网格线
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              show: true,
              textStyle: {
                color: "#FFFFFF",
                fontSize: this.$fontSize(0.18) //字体大小
              }
            },
            splitLine: {
              //网格线
              show: false
            },
            minInterval: 200,
            axisLine: {
              lineStyle: {
                color: "#EEEBE9"
              }
            }
          }
        ],
        series: [
          {
            type: "bar",
            data: dataList,
            barWidth: "35%",
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "#01D8FF"
              },
              {
                offset: 1,
                color: "#105FFC"
              }
            ])
          }
        ]
      };
      myChart.setOption(option);
    }
  }
};
</script>

<style>
</style>